<template>
	<view>
		<view class="comment">
			<view class="user-info">
				<view class="avatar-wrap">
					<image class="avatar" :src="curUser.avatar" mode="aspectFill" @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + user_id)" ></image>
					<view class="dot" v-if="imStatus==='Online'"></view>
				</view>
				<view class="name" @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + user_id)">
					{{curUser.nickname}}
				</view>
				<image @click="ownerAction(1)" class="icon-32" src="../../static/btn_like.png" mode="widthFix"></image>
				<view class="text">
					{{curUser.like_num}}
				</view>
				<image @click="ownerAction(2)" class="icon-32" src="../../static/btn_no_like.png" mode="widthFix"></image>
				<view class="text">
					{{curUser.nolike_num}}
				</view>
			</view>
			<view class="title-1">
				别人对TA的评论
			</view>
			<view class="badge">
				<view class="item" v-for="item in tagList" :key="item.id">
					{{item.name}} +{{item.num}}
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,i) in list" :key="i">
					<image class="avatar" :src="item.avatar" mode="aspectFill" @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.be_user_id)" ></image>
					<!-- <u-avatar @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.be_user_id)" size="72" :src="item.avatar"></u-avatar> -->
					<view class="pl-20 flex-1">
						<view @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.be_user_id)" class="name">{{item.nickname}}</view>
						<view class="desc">{{item.content}}</view>
					</view>
				</view>
				<u-loadmore :status="status"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"n-user-comment",
		data() {
			return {
				tagList: [],
				curUser:'',
				imStatus:''
			};
		},
		props:['status','list','user','user_id'],
		mounted(){
			this.getUserTag()
			this.curUser = this.user
			this.getUserImStatus()
		},
		methods:{
			// 查询其他用户的状态 状态Offline Online
			getUserImStatus(){
				this.$api.getImUserStatus({
					im:this.user.im_account
				}).then(res=>{
					if(res.code==1){
						console.log(res)
						this.imStatus = res.data[0].Status
					}
				})
			},
			getUserTag() {
				this.$api.getUserCenterTags({
					user_id: this.user_id
				}).then(res => {
					if (res.code == 1) {
						this.tagList = res.data
					}
				})
			},
			ownerAction(type,be_user_id){
				this.$api.ownerAction({
					type,
					be_user_id: this.user_id
				}).then(res=>{
					this.$tools.toast(res.msg)
					if(res.code==1){
						if(type==1){
							this.curUser.like_num = res.data
						}
						if(type==2){
							this.curUser.nolike_num = res.data
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.comment {
		margin-top: 16upx;
		padding: 40upx 30upx;
		background: #fff;

		.user-info {
			@include flex-between;
			.avatar-wrap{
				position: relative;
				.dot{
					width: 18upx;
					height: 18upx;
					border-radius: 10upx;
					position: absolute;
					right: 4upx;
					bottom: 8upx;
					background: limegreen;
				}
			}
			.avatar{
				width: 72upx;
				height: 72upx;
				min-width: 72upx;
				border-radius: 100%;
			}
			.name {
				font-size: 32upx;
				font-weight: 500;
				color: #333333;
				margin-left: 20upx;
				flex: 1;
			}

			.text {
				font-size: 18upx;
				color: #999999;
				margin-left: 8upx;
			}

			.icon-32 {
				margin-left: 60upx;
			}
		}

		.title-1 {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			margin: 50upx 0 30upx;
		}

		.badge {
			@include flex;
			flex-wrap: wrap;
			margin-bottom: 20upx;

			.item {
				text-align: center;
				min-width: 205upx;
				line-height: 48upx;
				background: #EDF5F1;
				border-radius: 24upx;
				font-size: 26upx;
				color: #519D76;
				margin-right: 20upx;
				margin-bottom: 20upx;
			}
		}

		.list {
			padding-bottom: 100upx;

			.item {
				display: flex;
				border-bottom: 1upx solid #EFEFEF;
				padding-bottom: 40upx;
				margin-bottom: 40upx;
				.avatar{
					width: 72upx;
					height: 72upx;
					min-width: 72upx;
				}
				.name {
					font-size: 30upx;
					color: #7B7B7B;
				}

				.desc {
					font-size: 30upx;
					line-height: 45upx;
					color: #333333;
				}
			}
		}
	}
</style>